<template>
  <panel title="最近24小时车辆收费趋势">
    <div class="ml20 mr20">
      <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'StallStatistic',

  data () {
    return {
      // show: false,
      chartWidth: '700px',
      chartHeight: '230px',
      floorDatasDefault: {
      }
    }
  },

  computed: {
    chartOptions () {
      // let data = {
      //   name: '直接访问',
      //   type: 'bar',
      //   data: [320, 332, 301, 334, 390, 330, 420, 320, 332, 301, 334, 390]
      // }
      let data = this.$store.getters.lastTwentyFour
      let data1 = data[0]
      let nowTime = new Date().getHours()
      let timeData = []
      for (let i = nowTime + 1, len = 24; i < len; i++) {
        timeData.push(`${i}:00`)
      }
      for (let i = 0, len = nowTime + 1; i < len; i++) {
        timeData.push(`${i}:00`)
      }
      return {
        tooltip: {},
        grid: {
          left: '1%',
          right: '4%',
          bottom: '6%',
          top: '20%',
          containLabel: true
        },
        yAxis: [{
          type: 'value'
        }],
        xAxis: [{
          // type: 'category',
          silent: false,
          splitLine: {
            show: false
          },
          // data: ['1:00', '3:00', '5:00', '7:00', '9:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00']
          data: timeData
        }],
        series: [{
          name: '收费趋势',
          type: 'bar',
          barWidth: 17,
          data: data1
        }]
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    }
  }
}
</script>
